document.addEventListener('DOMContentLoaded', () => {
    // Avatar change
    const avatarBtn = document.getElementById('change-avatar-btn');
    const avatarInput = document.getElementById('avatar-input');
    const avatarImg = document.getElementById('avatar');

    avatarBtn.addEventListener('click', (e) => {
        e.preventDefault();
        avatarInput.click();
    });

    avatarInput.addEventListener('change', (e) => {
        const reader = new FileReader();
        reader.onload = () => avatarImg.src = reader.result;
        reader.readAsDataURL(e.target.files[0]);
    });


// 模拟省市区数据
    const data = {
        '湖北省': {
            '武汉市': ['江岸区', '江汉区', '硚口区'],
            '黄石市': ['黄石港区', '西塞山区', '下陆区']
        },
        '湖南省': {
            '长沙市': ['芙蓉区', '天心区', '岳麓区'],
            '株洲市': ['天元区', '荷塘区', '芦淞区']
        }
    };

// 监听事件
    document.getElementById("province").addEventListener("change", function () {
        loadCities(this.value);
    });

    document.getElementById("city").addEventListener("change", function () {
        loadDistricts(this.value);
    });


// 加载城市数据
    function loadCities(province) {
        const citySelect = document.getElementById("city");
        const districtSelect = document.getElementById("district");

        // 清空之前的选项
        citySelect.innerHTML = '<option value="">请选择城市</option>';
        districtSelect.innerHTML = '<option value="">请选择区</option>';

        if (province && data[province]) {
            const cities = Object.keys(data[province]);
            cities.forEach(city => {
                citySelect.innerHTML += `<option value="${city}">${city}</option>`;
            });
        }
    }

// 加载区数据
    function loadDistricts(city) {
        const province = document.getElementById("province").value;
        const districtSelect = document.getElementById("district");

        // 清空之前的选项
        districtSelect.innerHTML = '<option value="">请选择区</option>';

        if (province && city && data[province][city]) {
            const districts = data[province][city];
            districts.forEach(district => {
                districtSelect.innerHTML += `<option value="${district}">${district}</option>`;
            });
        }
    }

// 获取输入框和按钮元素
    const inputPass = document.getElementById('inputPass');


// 禁用输入框
    inputPass.disabled = true;

    // document.addEventListener('DOMContentLoaded', function () {
    //     // 获取按钮并添加点击事件
    //     const myButton = document.getElementById('myButton');
    //
    //     if (myButton) {
    //         myButton.addEventListener('click', function () {
    //             // 当按钮被点击时，跳转到 '/dashboard/center/changepass' 路由
    //             window.location.href = '/dashboard/center/changepass';
    //         });
    //     }
    // });


document.getElementById("save-btn").addEventListener("click", saveUserInfo);

    function saveUserInfo() {
            // 模拟保存操作，可以在这里调用实际的保存函数
            alert("用户信息已保存");
        }


// 监听保存按钮，将头像和昵称保存在saveUserInfo()
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('save-btn').addEventListener('click', saveUserInfo);
    });

    function saveUserInfo() {
        const username = document.getElementById('username-input').value;
        const avatar = document.getElementById('avatar-input').value;

        localStorage.setItem('username', username || '默认用户名');
        localStorage.setItem('avatar', avatar || 'default-avatar.png');

        alert('用户信息已保存！');
    }

    // // 添加点击事件监听器
    // document.getElementById('return').addEventListener('click', goBack);
    //
    // function goBack() {
    //   // 返回到上一页
    //   // history.back();
    //   // 或者使用 history.go(-1);
    //     window.location.href = '../../templates/dashboard.html'; // 这里的 '/' 是主页的路径，根据你的实际路径调整
    // }
    // Form validation on submit
    document.getElementById('user-form').addEventListener('submit', function (e) {
        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        const {username, email} = this;

        if (!username.value.trim() || !emailPattern.test(email.value)) {
            alert("昵称和有效的邮箱是必填项！");
            e.preventDefault();
        }
    });

    // // Flash message handling
    // document.querySelectorAll('.flashed-messages li').forEach(msg => {
    //     setTimeout(() => {
    //         msg.style.opacity = '0';
    //         setTimeout(() => msg.remove(), 500);
    //     }, 2000);
    // });
});
